<template>
    <div>
        <div class="pop-plogin">
            <div class="title title-hook">登录</div>
            <div class="error error-hook"></div>
            <div class="phone-wrapper border-1px phone-wrapper-hook">
                <input type="tel" class="input-val phone-hook needsfocus" placeholder="请输入手机号码" maxlength="11" v-model="telephone">
                <div class="phone-suggest suggest-hook" style="display: none;"></div>
            </div>
          <div class="phone-wrapper border-1px phone-wrapper-hook">
            <input type="password" class="input-val phone-hook needsfocus" placeholder="请输入密码" v-model="password">
            <div class="phone-suggest suggest-hook" style="display: none;"></div>
          </div>
            <div class="desc desc-hook"></div>
            <div class="login-btn btn-hook" v-show="!eventActive" :class="isTelephoneVal? 'bg-active': 'bg-base'">登录</div>
            <div class="login-btn btn-hook" v-show="eventActive" :class="isTelephoneVal? 'bg-active': 'bg-base'" @click="login">登录</div>
        </div>
        <div class="close" @click="close_mask">
            <span></span>
        </div>
    </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import {Indicator,Toast} from 'mint-ui'
import storage from 'good-storage'

// import { userlogin } from "../api/user";

export default {
    data () {
        return {
            telephone:'',
            password: '',
            eventActive: false
        }
    },
    watch: {
      telephone (value) {
          if(value) {
            this.eventActive = true
            this.$store.dispatch('check_telephone',value)
            console.log(value)
          }else{
            this.eventActive = false
          }
      },
      password(value){
          if (value) {
            this.$store.dispatch('check_password',value)
          }
      }
    },
    component: {
      Indicator,
      Toast
    },
    computed: {
      ...mapState([
          'isTelephoneVal',
          'jwt_token',
          'save_telephone'
      ])
    },
    methods: {
        ...mapActions([
            'close_mask',
            'toMessageConfirm'
            ]),
        login() {
          this.$post('api/login',{mobile: this.$store.state.telephone,password: this.$store.state.password},'请求失败').then(
            res => {
              if (res.data) {
                this.$store.state.jwt_token = res.data
                storage.set('token',this.$store.state.jwt_token)
                this.$store.dispatch('save_jwt')
                setTimeout(()=>{
                  this.close_mask()
                  this.$store.dispatch('save_telephone')
                },1500)
              }
              Toast(res.msg)
              // console.log(storage.get('token'));
            }
          )
        }
    }
}
</script>
<style>
.pop-plogin {
    padding-top: 40px;
}

.pop-plogin .title {
    margin: -2px 0 7px;
    text-align: center;
    font-size: 16px;
    color: #333;
}

.pop-plogin .error {
    height: 10px;
    opacity: 0;
    transition: all .25s;
    -webkit-transition: all .25s;
    text-align: center;
    font-size: 10px;
    color: #ff5454;
}

.pop-plogin .phone-wrapper,
.pop-plogin .pwd-wrapper {
    width: 207px;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    position: relative;
}

.login-popup input {
    outline: none;
    border: none;
    background: transparent;
}

.pop-plogin .input-val {
    width: 207px;
    line-height: 22px;
    margin-top: 16px;
    text-align: center;
    color: #333;
    font-size: 16px;
    outline: 0;
}

.pop-plogin .phone-wrapper:after {
    display: block;
    position: absolute;
    border-top: 1px solid rgba(0, 0, 0, .2);
    left: 0;
    width: 100%;
    content: " ";
}

.pop-plogin .pwd-wrapper {
    display: none;
    position: relative;
    height: 0;
    overflow: hidden;
    margin-top: 0;
    transition: all .25s;
    -webkit-transition: all .25s;
}

.pop-plogin .login-btn {
    width: 100%;
    height: 44px;
    line-height: 44px;
    margin-top: 30px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    text-align: center;
    font-size: 16px;
    color: #fff;
}
.bg-active {
    background: #4a4c5b;
}
.bg-base{
    background: #ccc;
}
.login-popup .close {
    position: absolute;
    right: 2px;
    top: 2px;
    padding: 8px;
}

.login-popup .close>span {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url();
    background-size: 12px 12px;
}
</style>
